import React, { Component } from 'react'
import Breadcrumb from '../base/Breadcrumb'
import { Input, Message, Form } from 'element-react'
import {withRouter} from 'react-router-dom'
import {FormWrapper} from '../base/BaseStatic'
import styled from 'styled-components'

class MemberDetail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      address: '',
      avatar: '',
      createTime: '',
      email: '',
      id: '',
      status: '',
      telephone: '',
      username: ''
    }
  }
  componentDidMount () {
    this.$ajax.consumerDetail(this.props.match.params.id).then(res => {
      if (res.code === 200) {
        this.setState({username: res.data.username, email: res.data.email, telephone: res.data.telephone, address: res.data.address})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  cancel () {
    this.props.history.goBack()
  }
  render () {
    const Title = styled.div`
      font-size: 14px;
      margin-bottom: 22px;
    `
    return (
      <div className="memberDetail">
        <Breadcrumb data={['会员管理', '会员', '查看']}/>
        <FormWrapper model={this.state.form} labelWidth="80">
          <Title>注册信息</Title>
          <Form.Item label="用户名"><Input value={this.state.username} disabled></Input></Form.Item>
          <Form.Item label="头像"><div className="smallPicture"><img src={require('../../assets/images/logo.png')} alt=""/></div></Form.Item>
        </FormWrapper>
        <FormWrapper model={this.state.form} labelWidth="80">
          <Title>联系信息</Title>
          <Form.Item label="邮箱"><Input value={this.state.email} disabled></Input></Form.Item>
          <Form.Item label="电话号码"><Input value={this.state.telephone} disabled></Input></Form.Item>
          <Form.Item label="联系地址"><Input value={this.state.address} disabled></Input></Form.Item>
        </FormWrapper>
        <FormWrapper model={this.state.form} labelWidth="80">
          <Title>实名信息</Title>
          <Form.Item label="姓名"><Input disabled></Input></Form.Item>
          <Form.Item label="出生日期"><Input disabled></Input></Form.Item>
          <Form.Item label="证件号"><Input disabled></Input></Form.Item>
        </FormWrapper>
        <button type="button" className="btn btn-cancel" onClick={this.cancel.bind(this)}>返回</button>
      </div>
    )
  }
}

export default withRouter(MemberDetail)